﻿<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-16">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <title>AWTRIX 2</title>

    <!-- Favicon-->
    <link rel="icon" href="../favicon.ico" type="image/x-icon">

    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Roboto:400,700&subset=latin,cyrillic-ext" rel="stylesheet" type="text/css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" type="text/css">

    <script src="https://kit.fontawesome.com/f57ed06236.js" crossorigin="anonymous?ver=1606014380247"></script>


    <!-- Bootstrap Core Css -->
    <link href="../../plugins/bootstrap/css/bootstrap.css" rel="stylesheet">

    <!-- Waves Effect Css -->
    <link href="../plugins/node-waves/waves.css" rel="stylesheet" />

    <!-- Animation Css -->
    <link href="../plugins/animate-css/animate.css" rel="stylesheet" />

    <!-- Colorpicker Css -->
    <link href="../plugins/bootstrap-colorpicker/css/bootstrap-colorpicker.css" rel="stylesheet" />

    <!-- Multi Select Css -->
    <link href="../plugins/multi-select/css/multi-select.css" rel="stylesheet">

    <!-- Bootstrap Spinner Css -->
    <link href="../plugins/jquery-spinner/css/bootstrap-spinner.css" rel="stylesheet">

    <!-- Bootstrap Tagsinput Css -->
    <link href="../plugins/bootstrap-tagsinput/bootstrap-tagsinput.css" rel="stylesheet">

    <!-- Bootstrap Select Css -->
    <link href="../plugins/bootstrap-select/css/bootstrap-select.css" rel="stylesheet" />

    <!-- Animation Css -->
    <link href="../plugins/animate-css/animate.css" rel="stylesheet" />


    <!-- Wait Me Css -->
    <link href="../plugins/waitme/waitMe.css" rel="stylesheet" />

    <!-- noUISlider Css -->
    <link href="../plugins/nouislider/nouislider.min.css" rel="stylesheet" />

    <!-- Custom Css -->
    <link href="../css/style.css" rel="stylesheet">

    <!-- AdminBSB Themes. You can choose a theme from css/themes instead of get all themes -->
    <link href="../css/themes/all-themes.css" rel="stylesheet" />

    <!-- awtrix Interface -->
    <script src="../js/awtrix_ws.js?ver=1606014380247"></script>
</head>

<body class="theme-blue-grey" id="body">

    <!-- Page Loader -->
    <div class="page-loader-wrapper">
        <div class="loader">
            <div class="preloader">
                <div class="spinner-layer pl-red">
                    <div class="circle-clipper left">
                        <div class="circle"></div>
                    </div>
                    <div class="circle-clipper right">
                        <div class="circle"></div>
                    </div>
                </div>
            </div>
            <p>Please wait</p>
        </div>
    </div>
    <!-- #END# Page Loader -->
    <!-- Overlay For Sidebars -->
    <div class="overlay"></div>
    <!-- #END# Overlay For Sidebars -->
    <!-- Search Bar -->
    <div class="search-bar">
        <div class="search-icon">
            <i class="material-icons">search</i>
        </div>
        <input type="text" placeholder="START TYPING..">
        <div class="close-search">
            <i class="material-icons">close</i>
        </div>
    </div>
    <!-- #END# Search Bar -->
    <!-- Top Bar -->
    <nav class="navbar">
        <div class="container-fluid">
            <div class="navbar-header">
                <a href="javascript:void(0);" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false"></a>
                <a href="javascript:void(0);" class="bars"></a>
                <a id="title" class="navbar-brand" href="../../pages/home.html">AWTRIX</a>
            </div>
            <div class="collapse navbar-collapse" id="navbar-collapse">
                <ul class="nav navbar-nav navbar-right">
                </ul>
            </div>
        </div>
    </nav>
    <!-- #Top Bar -->
    <section>
        <!-- Left Sidebar -->
        <!-- Left Sidebar -->
        <aside id="leftsidebar" class="sidebar">

            <!-- #User Info -->
            <!-- Menu -->
            <div class="menu">
                <ul class="list">
                    <li class="header">MAIN NAVIGATION</li>
                    <li>
                        <a href="../pages/home.html">
                            <i class="awesomeicon fas fa-home"></i>
                            <span>Dashboard</span>
                        </a>
                    </li>
                    <li>
                        <a href="../pages/myApps.html">
                            <i class="awesomeicon fas fa-th"></i>
                            <span>My Apps</span>
                        </a>
                    </li>
                    <li>
                        <a href="../pages/appstore.html">
                            <i class="awesomeicon fas fa-store"></i>
                            <span>Appstore</span>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0);" class="menu-toggle">
                            <i class="awesomeicon fas fa-icons"></i>
                            <span>Extras</span>
                        </a>
                        <ul class="ml-menu">

                            <li>
                                <a href="../pages/arcade.html">
                                    <i class="awesomeiconsmall fas fa-gamepad"></i>
                                    <span>Arcade</span>
                                </a>
                            </li>
                            <li>
                                <a href="../pages/icons.html">
                                    <i class="awesomeiconsmall fas fa-grin-wink"></i>
                                    <span>Icon Database</span>
                                </a>
                            </li>
                            <li>
                                <a href="../pages/newIcon.html">
                                    <i class="awesomeiconsmall fas fa-grin-stars"></i>
                                    <span>AWTRIXER</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="javascript:void(0);" class="menu-toggle">
                            <i class="awesomeicon fas fa-cogs"></i>
                            <span>Settings</span>
                        </a>
                        <ul class="ml-menu">
                            <li>
                                <a href="../pages/hostsettings.html">
                                    <i class="awesomeiconsmall fas fa-server"></i>
                                    <span>Host</span>
                                </a>
                            </li>
                            <li>
                                <a href="../pages/premium.html">
                                    <i class="awesomeiconsmall fas fa-trophy"></i>
                                    <span>Premium</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="active">
                        <a href="javascript:void(0);" class="menu-toggle">
                            <i class="awesomeicon fas fa-signal"></i>
                            <span>Status</span>
                        </a>
                        <ul class="ml-menu">
                            <li>
                                <a href="../pages/host.html">
                                    <i class="awesomeiconsmall fas fa-server"></i>
                                    <span>Host</span>
                                </a>
                            </li>
                            <li>
                                <a href="../pages/matrix.html">
                                    <i class="awesomeiconsmall fas fa-microchip"></i>
                                    <span>Matrix</span>
                                </a>
                            </li>
                            <li>
                                <a href="../pages/log.html">
                                    <i class="awesomeiconsmall fas fa-clipboard-list"></i>
                                    <span>Log</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="header">OTHERS</li>
                    <li class="active">
                        <a href="../pages/about.html" target="_blank">
                            <i class="awesomeicon fas fa-address-card"></i>
                            <span>About</span>
                        </a>
                    </li>
                    <li>
                        <a href="../pages/terms.html" target="_blank">
                            <i class="awesomeicon fas fa-user-shield"></i>
                            <span>Policies</span>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0);" class="menu-toggle">
                            <i class="awesomeicon fas fa-heart"></i>
                            <span>Support AWTRIX</span>
                        </a>
                        <ul class="ml-menu">
                            <li>
                                <a href="https://paypal.me/blueforcer" target="_blank">
                                    <i class="awesomeiconsmall fab fa-paypal"></i>
                                    <span>Donate</span>
                                </a>
                            </li>
                            <li>
                                <a href="https://www.patreon.com/blueforcer" target="_blank">
                                    <i class="awesomeiconsmall fab fa-patreon"></i>
                                    <span>Patreon</span>
                                </a>
                            </li>
                            <li>
                                <a href="https://blueforcer.de/shop/" target="_blank">
                                    <i class="awesomeiconsmall fas fa-shopping-basket"></i>
                                    <span>Shop</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="javascript:void(0);" class="menu-toggle">
                            <i class="awesomeicon fas fa-external-link-alt"></i>
                            <span>Links</span>
                        </a>
                        <ul class="ml-menu">
                            <li>
                                <a href="https://awtrixdocs.blueforcer.de" target="_blank">
                                    <i class="awesomeiconsmall fas fa-book"></i>
                                    <span>Documentation</span>
                                </a>
                            </li>
                            <li>
                                <a href="https://forum.blueforcer.de" target="_blank">
                                    <i class="awesomeiconsmall fab fa-wpforms"></i>
                                    <span>Forum</span>
                                </a>
                            </li>
                            <li>
                                <a href="https://discord.gg/VUNc99B" target="_blank">
                                    <i class="awesomeiconsmall fab fa-discord"></i>
                                    <span>Discord</span>
                                </a>
                            </li>
                            <li>
                                <a href="https://poeditor.com/join/project/OT89XVkSEm" target="_blank">
                                    <i class="awesomeiconsmall fas fa-language"></i>
                                    <span>Translation</span>
                                </a>
                            </li>

                        </ul>
                    </li>
                    <li id="critical" hidden>
                        <a href="../pages/critical.html">
                            <i class="awesomeicon fas fa-exclamation-triangle" style="color: red;"></i>
                            <span>Critical Errors</span>
                        </a>
                    </li>
                </ul>
            </div>
            <!-- #Menu -->
            <!-- Footer -->
            <div class="legal">
                <div class="copyright">
                    &copy; 2018 - 2020 <a href="https://blueforcer.de/">Blueforcer</a>
                </div>
                <div class="version">
                    <b>Version: </b> <i id="serverversion">110719</i>
                </div>
            </div>
            <!-- #Footer -->
        </aside>
    </section>
    <!-- #END# Left Sidebar -->
    <!-- Right Sidebar -->

    <!-- #END# Right Sidebar -->
    </section>

    <section class="content">
        <div class="row clearfix">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <div class="card">
                    <div class="body">
                        <h2>About me:</h2>
                        <p>I am Stephan, aka Blueforcer, 31 years, husband, father, lateral thinker and I am from Frankfurt, Germany. I am a "electronics engineer for devices and systems" and for some time now also a programmer. Beside some smaller programming
                            activities for my company, I mainly program in my spare time. As an absolute geek I deal with everything that has to do with technology, and that's exactly how my household looks like 😊</p>
                        <p>&nbsp;</p>
                        <h2>About AWTRIX</h2>
                        <p>In 2017 I stumbled upon the famous French smart clock and found the principle quite cool. However, there was my mind on an unusual trip, that the thing is much too expensive for what it would bring as added value for me. Very strange.
                            From this, the idea was born to build my own pixel clock.<br />At that time, AWTRIX based completely standalone on an ESP8266 and with components that you could get anywhere. But after almost a year the ESP had reached its
                            limits. Because of the low resources (memory, ram etc.), it was not possible for me to add more functions. After several attempts and tinkering, the combination of host and controller was created. This decision is based on
                            Mainly one factor: AWTRIX is therefore independent. You can install it on an existing Raspberry that already runs the Smarthome, or you can install it on a NAS that doesn't have serial ports or GPIOs.<br />The host is completely
                            written in B4X, this has the advantage for me that I only need to know this one language for Android, iOS, Windows, Mac and Linux applications, on the other hand I had my first contact with programming with Visual Basic (which
                            is very similar). &nbsp;Starting with a perceived 10% programming knowledge, I have learned a lot through AWTRIX and new insights are directly implemented in AWTRIX. This is also the reason why AWTRIX is -not yet- open source.
                            I want to recognize and correct my mistakes myself. Besides, any professional programmer would probably fold their hands over their head if they saw my code. Until all this is fixed for my feelings, it will remain my own project
                            for the time being, where only I am allowed to tinker with 😊.</p>
                        <p></p>
                        <p>AWTRIX is a purely private project for which a lot of my free time is sacrificed. Thanks to many many user input, AWTRIX has become more powerful than the commercial product and the ideas never stop. <br />Thanks to the own developed
                            hardware like mainboard or awtrix, I was able to distinguish myself from the rather modest AWTRIX clones even on the style part. Thanks to my friend and hardware developer Matthias, AWTRIX could be made accessible to even more
                            people.
                        </p>
                        <p>&nbsp;</p>
                        <p>Used software and libraries:</p>
                        <ul>
                            <li>Host and Cloud : <a href="https://www.b4x.com/b4j.html">B4J</a></li>
                            <li>Webinterface Design: <a href="https://github.com/gurayyarar/AdminBSBMaterialDesign">AdminBSBMaterialDesign</a></li>
                            <li>AWTRIXER: <a href="https://www.piskelapp.com/">Piskel</a></li>
                            <li>Webserver: <a href="https://www.b4x.com/android/forum/threads/server-building-web-servers-with-b4j.37172/#content">jServer (based on Jetty)</a></li>
                        </ul>
                        <p>&nbsp;</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <script type="text/javascript">
        awtrix_connect("/about/ws");
    </script>
    <!-- Jquery Core Js -->
    <script src="../plugins/jquery/jquery.min.js?ver=1606014380247"></script>

    <!-- Bootstrap Core Js -->
    <script src="../plugins/bootstrap/js/bootstrap.js?ver=1606014380247"></script>

    <!-- Jquery Validation Plugin Css -->
    <script src="../plugins/jquery-validation/jquery.validate.js?ver=1606014380247"></script>

    <!-- JQuery Steps Plugin Js -->
    <script src="../plugins/jquery-steps/jquery.steps.js?ver=1606014380247"></script>
    <script src="../js/form-wizard.js?ver=1606014380247"></script>


    <!-- Select Plugin Js -->
    <script src="../plugins/bootstrap-select/js/bootstrap-select.js?ver=1606014380247"></script>

    <!-- Slimscroll Plugin Js -->
    <script src="../plugins/jquery-slimscroll/jquery.slimscroll.js?ver=1606014380247"></script>

    <!-- Bootstrap Colorpicker Js -->
    <script src="../plugins/bootstrap-colorpicker/js/bootstrap-colorpicker.js?ver=1606014380247"></script>


    <!-- Input Mask Plugin Js -->
    <script src="../plugins/jquery-inputmask/jquery.inputmask.bundle.js?ver=1606014380247"></script>

    <!-- Multi Select Plugin Js -->
    <script src="../plugins/multi-select/js/jquery.multi-select.js?ver=1606014380247"></script>

    <!-- Jquery Spinner Plugin Js -->
    <script src="../plugins/jquery-spinner/js/jquery.spinner.js?ver=1606014380247"></script>

    <!-- Bootstrap Tags Input Plugin Js -->
    <script src="../plugins/bootstrap-tagsinput/bootstrap-tagsinput.js?ver=1606014380247"></script>


    <!-- Waves Effect Plugin Js -->
    <script src="../plugins/node-waves/waves.js?ver=1606014380247"></script>
    <!-- Bootstrap Notify Plugin Js -->
    <script src="../plugins/bootstrap-notify/bootstrap-notify.js?ver=1606014380247"></script>
    <!-- SweetAlert Plugin Js -->
    <script src="../js/sweetalert.min.js?ver=1606014380247"></script>
    <!-- Custom Js -->
    <script src="../js/admin.js?ver=1606014380247"></script>
    <script src="../js/dialogs.js?ver=1606014380247"></script>
    <script src="../js/advanced-form-elements.js?ver=1606014380247"></script>

    <!-- Demo Js -->
    <script src="../js/others.js?ver=1606014380247"></script>

    <!-- Autosize Plugin Js -->
    <script src="../plugins/autosize/autosize.js?ver=1606014380247"></script>
</body>

</html>